<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖</title>
  </head>
  <body>
    <input type="text" />

    <script>
      // 没有防抖的实现
      // const inputEl = document.querySelector('input')
      // inputEl.oninput = function(e){
      //   console.log(e.target.value)
      // }
      // 加入防抖的实现
      //   const inputEl = document.querySelector("input");
      //   const debounce = (fn, delay = 500) => {
      //     let timer = null;
      //     return function (...args) {
      //       if (timer) {
      //         clearTimeout(timer);
      //       }
      //       timer = setTimeout(() => {
      //         fn.apply(this, args);
      //       }, delay);
      //     };
      //   };

      //   inputEl.oninput = debounce(function (e) {
      //     // console.log('输入...')
      //     console.log(e.target.value);
      //   }, 1000);

      // 节流

      const inputEl = document.querySelector("input");

      const thorrtle = (fn, delay = 500) => {
        let startTime = 0;

        return function (...args) {
          let curTime = new Date().getTime();
          let diff = delay - (curTime - startTime);
          if (diff <= 0) {
            fn.apply(this, args);
            startTime = curTime;
          }
        };
      };

      // function thorrtle(func, limit) {
      //     let inThrottle = false;

      //     return function(...args) {
      //         const context = this; // 保存当前的 this 上下文

      //         if (!inThrottle) {
      //             // 执行传入的函数
      //             func.apply(context, args);
      //             inThrottle = true; // 标记为正在节流

      //             // 使用闭包和 setTimeout 来在指定的延迟后重置 inThrottle
      //             setTimeout(() => {
      //                 inThrottle = false; // 重置节流状态
      //             }, limit);
      //         }
      //     };
      // }

      inputEl.oninput = thorrtle(function (e) {
        console.log(e.target.value);
      }, 1000);
    </script>
  </body>
</html>
